<template>
  <view class="main">
    <header-vue :back="true" title="系统设置"></header-vue>
    <view class="white-box margin32 font28">
      <view class="flex between item" @click="onAccountSecurityClick">
        <view>账号与安全</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <view class="flex between item">
        <view>关于我们</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <view class="flex between item">
        <view>用户协议</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <view class="flex between item">
        <view>隐私政策</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <view class="flex between item" @click="onVerClick">
        <view>版本更新</view>
        <view class="flex align-center">
          <text>有更新</text>
          <i class="iconfont icon-jiantou"></i
        ></view>
      </view>
      <view class="flex between item">
        <view>清除缓存</view>
        <view class="clear">
          <text class="clear-font">857.70MB</text>
          <button class="clear-btn">清理</button>
        </view>
      </view>
    </view>
    <view class="flex btn margin32" @click="onOutClick">退出登录</view>

    <update-popup :show="updateShow" @close="updateShow = false" />
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import UpdatePopup from "./components/update-popup.vue";

export default {
  components: {
    headerVue,
    UpdatePopup,
  },
  data() {
    return {
      updateShow: false,
      pageTerminalType: "master",
    };
  },
  onLoad(options) {
    if (options.pageTerminalType) {
      this.pageTerminalType = options.pageTerminalType;
    }
  },
  methods: {
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
    onAccountSecurityClick() {
      uni.navigateTo({
        url: "/views-master/my/account-security",
      });
    },
    onVerClick() {
      this.updateShow = true;
    },
    onOutClick() {
      uni.showModal({
        title: "提示",
        content: "您是否要退出？",
        success: (res) => {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/main",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #f6f6f6;
  height: 100vh;
  position: relative;
}

.margin32 {
  margin: 28rpx 32rpx;
}

.white-box {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 0 28rpx;
  box-sizing: border-box;

  .item {
    padding: 40rpx 0;
    box-sizing: border-box;
    border-top: 1rpx solid #dddddd;

    &:nth-child(1) {
      border: 0;
    }
  }
}

.btn {
  height: 80rpx;
  background: #0785cf;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
  border-radius: 60rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #ffffff;
  margin-top: 100rpx;
}
.clear {
  display: flex;
  align-items: center;
  .clear-font {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    margin-right: 8rpx;
  }
  .clear-btn {
    // width: 104rpx;
    height: 44rpx;
    line-height: 44rpx;
    margin: 0;
    // padding: 0;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    border: 1rpx solid #999999;
    background: #ffffff;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>
